<template>
    <!-- <el-button text @click="showdialog" > 添加用户</el-button> -->
    <el-dialog v-model="dialogFormVisible"   title="添加用户">
      <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="120px"
            style="width: 80%;padding-left: 10%;padding-top: 50;"
          >
          <!-- 输入学号 -->
            <el-form-item label="学号：" prop="id">
              <el-input v-model.number="ruleForm.id" type="text" autocomplete="off" />
            </el-form-item>
            <!-- 输入名字 -->
            <el-form-item label="姓名：" prop="username">
              <el-input v-model="ruleForm.username" type="test" autocomplete="off"/>
            </el-form-item>
            <!-- 输入身份证号 -->
            <el-form-item label="身份证号：" prop="identity">
              <el-input v-model="ruleForm.identity" />
            </el-form-item>
            <!-- 输入密码 -->
            <!-- <el-form-item label="密码：" prop="password">
              <el-input v-model="ruleForm.password" />
            </el-form-item> -->
            <!-- 电话号码 -->
            <el-form-item label="电话号码：" prop="phone">
              <el-input v-model="ruleForm.phone" />
            </el-form-item>
            <!-- 学院 -->
            <el-form-item label="学院：" prop="college">
              <el-input v-model="ruleForm.college" />
            </el-form-item>
            <!-- 专业 -->
            <el-form-item label="专业：" prop="major">
              <el-input v-model="ruleForm.major" />
            </el-form-item>
            <!-- 激活状态 -->
            <el-form-item label="激活状态：" prop="state">
              <el-switch v-model="ruleForm.state" active-value="1" inactive-value="0"/>
            </el-form-item>
          </el-form>
      
      <!-- 底部 -->
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="closedialog">取消</el-button>
        <el-button style="margin-left: 60%;" @click="resetForm"><el-icon><RefreshLeft /></el-icon>重置</el-button>
        <el-button type="primary" @click="submitForm(ruleForm)"><el-icon><Plus /></el-icon>添加</el-button>
      </span>
    </template>
    </el-dialog>

</template>

<script>
import {  ref,reactive } from 'vue'
import {AddUser} from '@/api/index/admin'
import _ from 'lodash'
const ruleFormRef = ref(null);
export default {
  name: 'Add_User',
  setup(){
    const dialogFormVisible = ref(false)
    const showdialog = () => {
      dialogFormVisible.value = true;
    };
    return {
          dialogFormVisible,
          showdialog
        }
      },

  data(){
    const validateid = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入学号'));
      } else {
        const reg = /^\d{6,10}$/; // 使用正则表达式匹配6到10位数字
        if (!reg.test(value)) {
          callback(new Error('学号必须为数字，且不小于6位不大于10位'));
        } else {
          callback();
        }
      }
    };
    // 名字验证流程

    const validatename = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入姓名'));
      } else {
        const chineseReg = /^[\u4e00-\u9fa5]+$/; // 匹配中文汉字的正则表达式
        const length = value.length; // 姓名长度
        if (!chineseReg.test(value) || length < 2) {
          callback(new Error('姓名必须大于等于两个汉字且不能有标点符号'));
        }  else if (length > 50) {
          callback(new Error('姓名长度不能超过50个字符'));
        } else {
          callback();
        }
      }
    };
        // 身份证验证
    const validateidentity = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入身份证号码'));
      } else {
        const reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/; // 基本格式校验
        if (!reg.test(value)) {
          callback(new Error('身份证号格式不正确'));
        } else {

          callback();
        }
      }
    };


    const rules = reactive({
      id: [{ required:true,validator: validateid ,trigger: 'blur' }],
      username: [{ required: true,validator: validatename, trigger: 'blur' }],
      identity: [{ required: true,validator: validateidentity, trigger: 'blur' }],
    })

    return {
      ruleForm: {
        id: '',
        username:'',
        password:'123456789',
        identity: '',
        phone: '',
        email: '',
        state:''
      },
      rules,
      ruleFormRef,
    };
  },

  methods:{
    // 表单关闭并且重置表单
    closedialog(){
      this.dialogFormVisible = false
      this.$refs.ruleFormRef.resetFields();
    },
    // 重置表单
    resetForm() {
    this.$refs.ruleFormRef.resetFields();
  },
  // 提交表单
  submitForm:_.debounce(function(){
    this.$refs.ruleFormRef.validate((valid) => {
      if (valid) {
        // 表单验证通过，可以在这里执行提交操作，比如发送表单数据到后端
        this.AddUsers();
        console.log('表单验证通过，提交的数据为：', this.ruleForm);
      } else {
        // 表单验证不通过，可以进行错误处理或者给出提示
        console.log('表单验证未通过，请检查输入');
      }
    });

    },500),
    AddUsers(){
      AddUser(this.ruleForm).then((res)=>{
        console.log(res);
        console.log(this.ruleForm)
        if(res.code===200){
          alert('添加成功');
        }
        else{
          alert('添加失败');
        }
      })
    },
  }
}
</script>


<style>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>